<template>
  <div class="container">
    <el-card>
      <div>
        <div class="content">
          <div
            class="echarts"
            style="width: 800px; height: 500px"
            ref="echarts"
          ></div>
        </div>
        <div class="search_header">
            <i class="el-icon-edit"></i>
            <span style="margin-right: 15px">下学期专业课成绩预测</span>
            <el-button type="primary" @click="openDialog" size="mini">打开成绩查询窗口</el-button>
          </div>
          <!-- <div>
            <el-drawer
              title="输入专业课后才可以查询"
              :visible.sync="drawer"
              :direction="direction"
              >
              <div>
            <div class="forecast">
          
          <div class="seach_box">
            <el-form ref="searchForm" :model="searchInfo" label-width="100px">
              <el-form-item label="专业课选择">
                <el-input v-model="searchInfo.curriculum"></el-input>
                <el-button type="primary" @click="confirm">确认</el-button>
              </el-form-item>
            </el-form>
            <div class="result_box"  v-if="confirmShow">
              <span class="forecast_result">预测分数为：85</span>
              <el-rate
              disabled
              v-model="value2"
              :colors="colors"
              allow-half
              show-text>
            </el-rate>
              <span class="forecast_accuracy">精确度：75%</span>
            </div>
          </div>
        </div>
          </div>
            </el-drawer>
          </div> -->
          <el-dialog
            title="输入专业课后才可以查询"
            :visible.sync="dialogVisible"
            width="50%"
            >
            <el-form ref="searchForm" :model="searchInfo" label-width="100px">
              <el-form-item label="专业课选择">
                <el-input v-model="searchInfo.curriculum"></el-input>
                <el-button type="primary" @click="confirm">确认</el-button>
              </el-form-item>
            </el-form>
            <div class="result_box" v-if="confirmShow">
              <span class="forecast_result">预测分数为：85</span>
              <el-rate
              disabled
              v-model="value2"
              :colors="colors"
              allow-half
              show-text>
            </el-rate>
              <span class="forecast_accuracy">精确度：75%</span>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
            </span>
          </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqGradePredict, reqAverageScore} from '@/api/curriculum'
export default {
  name: "WarningForecast",
  mounted() {
    this.getAvgScore()
  },
  data() {
    return {
      searchInfo: {
        curriculum: ''
      },
      value2: 0,
      texts: ['继续努力！','再加把劲！','不错哦！','值得表扬！','完美！'],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      direction: 'btt',
      drawer: false,
      confirmShow: false,
      dialogVisible: false,
      total: [],
      avgScore: [],
      lowScore: [],
      maxScore: [],
    };
  },
  methods: {
    async getAvgScore() {
      const { data: res } = await reqAverageScore({
        userId: this.$store.state.userInfo.userId
      })
      this.total = res.data
      this.total.forEach(item => {
        this.avgScore.push(item.avgscore)
        this.lowScore.push(item.lowscore)
        this.maxScore.push(item.maxscore)
      })
      this.echartsInit()
    },
    async confirm() {
      const { data: res } = await reqGradePredict({
        userId: this.$store.state.userInfo.userId,
        mid: this.searchInfo.curriculum
      })
      this.value2 = Math.floor(res.data.score / 20)
      if(this.searchInfo.curriculum != '') {
        this.confirmShow = true
      }
    },
    cancel() {
      this.searchInfo.curriculum = ''
      this.dialogVisible = false
      this.confirmShow = false
    },
    openDialog() {
      this.dialogVisible = true
      console.log(this.searchInfo.curriculum);
    },
    echartsInit() {
      let myChart = this.$echarts.init(this.$refs.echarts);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#528DAB",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["最高分", "最低分", "平均分"],
        },
        xAxis: [
          {
            type: "category",
            data: ["大一上", "大一下", "大二上", "大二下", "大三上", "大三下", "大四上", "大四下"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "最高/最低分",
            min: 0,
            max: 100,
            interval: 50,
            axisLabel: {
              formatter: "{value} 分",
            },
          },
          {
            type: "value",
            name: "平均分",
            min: 0,
            max: 90,
            interval: 5,
            axisLabel: {
              formatter: "{value} 分",
            },
          },
        ],
        series: [
          {
            name: "最高分",
            type: "bar",
            itemStyle: {
              color: 'pink'
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + "分";
              },
            },
            // data: [
            //     96,90,92,95,97,89,96,90,92
            // ],
            data: this.maxScore
          },
          {
            name: "最低分",
            type: "bar",
            itemStyle: {
              color: 'skyblue'
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + "分";
              },
            },
            data: this.lowScore
          },
          {
            name: "平均分",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + "分";
              },
            },
            data: this.avgScore
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.forecast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
.info {
  margin-bottom: 10px;
}
/deep/ .el-input {
  width: 220px;
  margin-right: 15px;
  margin-bottom: 20px;
}
.seach_box {
  width: 800px;
  padding-top: 25px;
}

.result_box {
  width: 500px;
  padding: 0px 200px 25px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
.search_header {
  margin: 25px;
}
</style>